<template>
    <div>
        <v-layout row justify-center>
      <v-flex md9 lg9 sm10 xl8>
       <slider animation="fade">
    <p style="line-height: 280px; font-size: 5rem; text-align: center;" v-if="!list.length">Loading...</p>
    <slider-item v-for="(i, index) in list" :key="index" :on-click="test">
      <div :style="i">
        <p style="line-height: 280px; font-size: 5rem; text-align: center;">Page{{ index + 1 }}</p>
      </div>
    </slider-item>
  </slider>
      </v-flex>
    </v-layout>
    </div>
</template>

<script>
import { Slider, SliderItem } from 'vue-easy-slider'

export default {
    name: "Bar",
    components: {
    'Slider': Slider,
    'SliderItem': SliderItem
  },
    data(){
    return{
      list: [],
    }
  },
  methods: {
    test () {console.log(1)}
  },

  mounted () {
    setTimeout(() => {
      this.list = [
        { backgroundColor: '#3f51b5', width: '100%', height: '100%' },
        { backgroundColor: '#eee', width: '100%', height: '100%' },
        { backgroundColor: '#f44336', width: '100%', height: '100%' },
      ]
    }, 1000)
  }
}
</script>
